@layer components {
  .SelectPositioner {
    /* The outline is sometimes seen in Safari when the positioner is focused intermittently */
    outline: 0;
    z-index: 1;

    @media (prefers-color-scheme: light) {
      /* Use filter for the shadow in order to catch the arrow part */
      filter: drop-shadow(0 0 1px var(--color-gray-200))
        drop-shadow(0 0.5px 1px var(--color-gray-200)) drop-shadow(0 1px 2px var(--color-gray-200))
        drop-shadow(0 3px 8px var(--color-gray-300));
    }
  }

  .SelectPopup {
    outline: 0;
    max-width: var(--available-width);
    max-height: var(--available-height);
    border-radius: var(--radius-md);
    background-color: var(--color-popup);
    overflow: hidden;
    cursor: default;
    user-select: none;
    padding-block: 0.25rem;

    /* Make sure the layout doesn't fall apart on extreme zoom on mobile */
    min-width: min-content;

    @media (prefers-color-scheme: dark) {
      box-shadow: inset 0 0 0 1px var(--color-gray-300);
    }
  }

  .SelectItem {
    @apply text-xs;
    outline: 0;
    display: grid;
    align-items: center;
    height: 1.75rem;
    white-space: nowrap;
    z-index: 0;

    /* Spacing is built into the grid (it's a bit easier this way) */
    grid-template-columns: 0.625rem 0.75rem 0.375rem auto 1.75rem;

    &[data-highlighted] {
      position: relative;
      color: white;

      &::before {
        content: '';
        position: absolute;
        inset-inline: 0.25rem;
        inset-block: 0;
        z-index: -1;
        border-radius: var(--radius-sm);
        background-color: var(--color-highlight);
      }
    }

    @media (pointer: coarse) {
      @apply text-md;
      height: 2.25rem;
      grid-template-columns: 0.5rem 0.75rem 0.5rem auto 1.5rem;
    }
  }

  .SelectItemIndicator {
    grid-column: 2;
    margin-top: -1px;
    width: 100%;
    height: auto;
  }

  .SelectItemText {
    grid-column: 4;
  }

  .SelectArrow {
    &[data-side='bottom'] {
      top: -6px;
    }

    &[data-side='top'] {
      bottom: -6px;
      transform: scaleY(-1);
    }
  }

  .SelectArrowFill {
    fill: var(--color-popup);
  }

  .SelectArrowStroke {
    @media (prefers-color-scheme: dark) {
      fill: var(--color-gray-300);
    }
  }
}
